<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default {
  setup() {
    let router = useRouter();
    const lists = reactive({
      imgs: [],
      fileList: [],
      content: "",
      title: "",
      plList: [],
      id: 1,
      remnant: "20", 
      remnants: "500", 
    });
    onMounted(() => {
      if (window.localStorage.getItem("myComment")) {
        lists.plList = JSON.parse(localStorage.getItem("myComment"));
      }
      if (window.localStorage.getItem("commentId")) {
        lists.id = localStorage.getItem("commentId");
      }
    });
    // 时间戳转换年月日时分秒
    // const timestampToTime = (timestamp)=> {
    //   var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //   var Y = date.getFullYear() + "-";
    //   var M =
    //     (date.getMonth() + 1 < 10
    //       ? "0" + (date.getMonth() + 1)
    //       : date.getMonth() + 1) + "-";
    //   var D =
    //     (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    //   var h =
    //     (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    //   var m =
    //     (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    //     ":";
    //   var s =
    //     date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    //   return Y + M + D + h + m + s;
    // }
    // 时间转换
    // const timeago = (getTimes) => {
    //   var data = new Date(getTimes);
    //   var dateTimeStamp = data.getTime();
    //   var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
    //   var hour = minute * 60;
    //   var day = hour * 24;
    //   var week = day * 7;
    //   var month = day * 30;
    //   var year = month * 12;
    //   var now = new Date().getTime(); //获取当前时间毫秒
    //   var diffValue = now - dateTimeStamp; //时间差

    //   var result = "";
    //   if (diffValue < 0) {
    //     result = "" + "未来";
    //   }
    //   var minC = diffValue / minute; //计算时间差的分，时，天，周，月
    //   var hourC = diffValue / hour;
    //   var dayC = diffValue / day;
    //   var weekC = diffValue / week;
    //   var monthC = diffValue / month;
    //   var yearC = diffValue / year;

    //   if (yearC >= 1) {
    //     result = " " + parseInt(yearC) + "年前";
    //   } else if (monthC >= 1 && monthC < 12) {
    //     result = " " + parseInt(monthC) + "月前";
    //   } else if (weekC >= 1 && weekC < 5 && dayC > 6 && monthC < 1) {
    //     result = " " + parseInt(weekC) + "周前";
    //   } else if (dayC >= 1 && dayC <= 6) {
    //     result = " " + parseInt(dayC) + "天前";
    //   } else if (hourC >= 1 && hourC <= 23) {
    //     result = " " + parseInt(hourC) + "小时前";
    //   } else if (minC >= 1 && minC <= 59) {
    //     result = " " + parseInt(minC) + "分钟前";
    //   } else if (diffValue >= 0 && diffValue <= minute) {
    //     result = "刚刚";
    //   }
    //   return result;
    // }
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      lists.imgs.push({
        url: file.content,
      });
      console.log(lists.imgs);
    };
    // 发布
    const enter = () => {
      lists.id++;

      lists.plList.push({
        id: lists.id,
        zone_image: require("../assets/img/dog.jpg"),
        nickname: "大泽哥无敌",
        images: lists.imgs,
        content: lists.content,
        title: lists.title,
        reply_count: 0,
        like_count: 0,
        publish_time: Date.parse(new Date()) / 1000,
      });

      window.localStorage.setItem("myComment", JSON.stringify(lists.plList));
      window.localStorage.setItem("Comments", JSON.stringify([]));
      window.localStorage.setItem("commentId", lists.id);
      Toast("成功发帖");
      router.push("/info");
    };
    const descInput = ()=>{
      if (lists.title.length) {
        var txtval = lists.title.length;
        lists.remnant = 20 - txtval;
      }
    }
    const descInputs = ()=>{
      if (lists.content.length) {
        var txtval = lists.content.length;
        lists.remnants = 500 - txtval;
      }
    }
    return {
      ...toRefs(lists),
      afterRead,
      enter,
      descInput,
      descInputs,
    };
  },
};
</script>
<template>
  <div class="container">
    <!-- <div class="nav-in">
      <div class="left">
        <div class="nav-back">
          <a href="javascript:;" @click="$router.go(-1)">
            <i class="iconfont icon-zuobian"></i>
          </a>
        </div>
        <div class="nav-title">发表帖子</div>
      </div>
      <div class="right">
        <div class="btn" @click="enter">发布</div>
      </div>
    </div> -->
    <div class="senttop">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
      <span>发表帖子</span>
    </div>
    <div class="text">
      <div class="head-title">
        <h3>标题</h3>
        <textarea
          autoSize
          maxlength="20"
          style="height: 30px"
          placeholder="请输入标题"
          v-model="title"
          @input="descInput"
        ></textarea>
        <div class="num">{{ remnant }}/20</div>
      </div>
      <div class="gary-border"></div>
      <div class="head-title">
        <h3>内容</h3>
        <textarea
          autoSize
          maxlength="500"
          v-model="content"
          placeholder="请输入内容"
          @input="descInputs"
        ></textarea>
        <div class="num">{{ remnants }}/500</div>
      </div>
      <div class="gary-border"></div>
      <!-- <div class="pic-inp">
        <div class="discussImgAdd discussImg">
          ＋
          <input
            type="file"
            name="file"
            class="upload"
            @change="uploadAvatar($event)"
          />
        </div>
        <div class="imgs">
          <div class="item" v-for="(item, key) in imgs" :key="key">
            <img :src="item" class="discussImg" alt="" />
          </div>
        </div>
      </div> -->
      <div class="img">
        <h3>图片上传</h3>
        <van-uploader
          v-model="fileList"
          multiple
          :after-read="afterRead"
          :max-count="9"
          :max-size="500 * 1024"
        ></van-uploader>
        <button type="button" class="login" @click="enter" >提交</button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.senttop {
    height: 49px;
    height: 49px;
    padding: 5px 10px;
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    display: flex;
    align-items: center;
    .iconfont {
      color: #fff;
      font-size: 20px;
    }
    span {
      flex: 1;
      // text-align: center;
      padding-left: 33%;
      font-size: 18px;
      color: #fff;
    }
  }
// .cont-title {
//   margin-bottom: 5px;
// }
// .upload {
//   opacity: 0;
//   position: absolute;
//   left: 0;
//   top: 0;
//   width: 50px;
//   height: 50px;
// }
// .pic-inp {
//   display: flex;
// }
// .discussImgAdd {
//   border: 1px dashed #eaeaea;
//   color: #dedede;
//   line-height: 50px;
//   font-size: 20px;
//   position: relative;
//   text-align: center;
// }
// .imgs {
//   display: flex;
// }
// .discussImg {
//   width: 50px;
//   height: 50px;
//   border-radius: 5px;
//   margin-right: 8px;
// }
// // 内容
// ::-webkit-input-placeholder {
//   color: #9a9a9a;
// }
.text {
  background-color: #fff;
  // margin-top: 45px;
  .gary-border {
    height: 10px;
    background-color: #f4f4f4;
  }
  .head-title {
    padding: 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    textarea {
      width: 100%;
      height: 200px;
      border: none;
      outline: none;
      &::placeholder {
        font-size: 14px;
      }
    }
    .num {
      text-align: right;
      font-size: 16px;
      color: #ddd;
    }
  }
  .img {
    padding: 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .login {
      width: 100%;
      font-size: 18px;
      color: #fff;
      text-align: center;
      background: linear-gradient(to right, #7b0b3b, #d51c78, #7b0b3b);
      border: none;
      margin-top: 30px;
      height: 45px;
      border-radius: 30px;
      letter-spacing: 3px;
    }
  }
  // .inp-title {
  //   padding: 5px;
  //   border: none;
  //   height: 35px;
  //   line-height: 35px;
  //   border-bottom: 1px solid #33333317;
  //   width: 100%;
  //   font-size: 14px;
  //   color: #666;
  // }
  // textarea {
  //   resize: none;
  //   height: 85px;
  // }
  // .cont-inp {
  //   padding: 20px 6px 10px;
  //   border: none;
  //   outline: none;
  //   width: 351px;

  //   font-size: 12px;
  // }
}
// 头部
.nav-in {
  height: 45px;
  line-height: 45px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  font-size: 14.5px;
  font-weight: 500;
  color: #333;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  z-index: 999;
  max-width: 750px;
  background: #fff;
  .nav-title {
    font-size: 18px;
    font-weight: 700;
    margin-left: 10px;
  }
  .left {
    display: flex;
  }
  .right {
    .btn {
      width: 60px;
      height: 30px;
      border-radius: 14px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      line-height: 30px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
    }
  }
}
.iconfont {
  color: #000;
}
</style>